<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>Jumbotron Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link
	href="${pageContext.request.contextPath }/dist/css/bootstrap.min.css"
	rel="stylesheet">

<link href="${pageContext.request.contextPath }/front/jumbotron.css"
	rel="stylesheet">
</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">CMS首页</a>
			</div>
			<c:choose>
				<c:when test="${sessionScope.frontUser == null }">
					<div id="navbar" class="navbar-collapse collapse">
						<form class="navbar-form navbar-right"
							action="${pageContext.request.contextPath }/UsersController?op=frontlogin"
							method="post">
							<div class="form-group">
								<input type="text" placeholder="请输入用户名" class="form-control"
									name="uname">
							</div>
							<div class="form-group">
								<input type="password" placeholder="请输入密码" class="form-control"
									name="upwd">
							</div>
							<button type="submit" class="btn btn-success">登录</button>
						</form>
					</div>
				</c:when>
				<c:otherwise>
				   <ul class="nav navbar-nav navbar-right">
				   <!-- 默认头像 -->
				   <c:if test="${sessionScope.frontUser.userImg == null }">
				     <li><img src="${pageContext.request.contextPath }/dist/img/1.jpg" 
				          style="border-radius: 50%;width: 30px;height: 30px;margin-top: 10px;"/></li>
				   </c:if>
				   <!-- 自定义头像 -->
				    <c:if test="${sessionScope.frontUser.userImg != null }">
				     <li><img src="${pageContext.request.contextPath }/DownloadFileServlet?fileName=${sessionScope.frontUser.userImg}" 
				           style="border-radius: 50%;width: 30px;height: 30px;margin-top: 10px;"/></li>
				   </c:if>
					<li><a href="#">${sessionScope.frontUser.userName }</a></li>
					<li><a href="#">个人信息</a></li>
					<li><a href="${pageContext.request.contextPath }/UsersController?op=frontExit">退出</a></li>
					
				   </ul>
				</c:otherwise>
			</c:choose>
			<!--/.navbar-collapse -->
		</div>
	</nav>
	<!-- 模糊查询 -->
     <form class="navbar-form navbar-right" >
			<input type="text" class="form-control" placeholder="搜索标题..." id="keyword" name="articleLike" value="<%=request.getAttribute("articleLike")==null?"":request.getAttribute("articleLike") %>">
			<input  type="button" id="clearBtn" class="form-control" value="清除"/>
			<input  type="button" id="searchBtn" class="form-control" value="搜索"/>
	</form>
	<!-- Main jumbotron for a primary marketing message or call to action -->
	<div class="jumbotron">
		<div class="container">
			<h1>Hello, world!</h1>
			<p>This is a template for a simple marketing or informational
				website. It includes a large callout called a jumbotron and three
				supporting pieces of content. Use it as a starting point to create
				something more unique.</p>
			<p>
				<a class="btn btn-primary btn-lg" href="#" role="button">Learn
					more &raquo;</a>
			</p>
		</div>
	</div>

	<div class="container">
		<!-- Example row of columns -->

		<c:if test="${requestScope.toplist == null }">
			<c:redirect url="/ArticleController?op=frontQuery"></c:redirect>
		</c:if>
		<div class="row" id="show">
			<c:if test="${requestScope.toplist != null }">
				<!--    显示文章:获取request范围的值 -->
				<c:forEach items="${requestScope.toplist }" var="article" varStatus="status">
					<div class="col-md-4">
						<h2>${article.articleTitle }</h2>
						<p style="width:300px;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;">${article.articleContent }</p>
						<p>
							<a class="btn btn-default" href="${pageContext.request.contextPath }/ArticleController?op=frontQueryById&articleId=${article.articleId }&articleIndex=${status.index}" role="button">查看详情
								&raquo;</a>
						</p>
					</div>
				</c:forEach>
			</c:if>
		</div>

		<hr>

		<footer>
			<p>&copy; 2016 Company, Inc.</p>
		</footer>
	</div>
	<!-- /container -->


	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script>
	  $(function(){
		 //对搜索框按钮做点击事件 
		  $("#searchBtn").click(function(){
			  //发起ajax请求
			  $.post("${pageContext.request.contextPath }/ArticleController",{op:"keyWord",keyWord:$("#keyword").val()},function(data){
				  //遍历
				  var  info="";
				  $.each(data,function(index,article){
					  info+='<div class="col-md-4"><h2>'+article.articleTitle +'</h2><p style="width:300px;white-space: nowrap;text-overflow: ellipsis;overflow:hidden;">'+article.articleContent +'</p><p><a class="btn btn-default" href="${pageContext.request.contextPath }/ArticleController?op=frontQueryById&articleId='+article.articleId +'" role="button">查看详情&raquo;</a></p></div>';
				  })
				  //显示在父div上
				  $("#show").html(info);
			  },"json")
		  });
		 //对清除按钮做点击事件
		  $("#clearBtn").click(function(){
			  $("#keyword").val("");
			  
		  })
		 
	  })
	
	</script>

</body>
</html>
